function drawSnake(snake){
// 绘制蛇的方法
    for(var i = 0; i < snake.snakePos.length;i++){
        if(!snake.snakePos[i].domContent){
            //如果进入此if，说明第一次创建蛇
            snake.snakePos[i].domContent = document.createElement("div");
            snake.snakePos[i].domContent.style.position = "absolute";
            snake.snakePos[i].domContent.style.width = snakeBody + "px";
            snake.snakePos[i].domContent.style.height = snakeBody + "px";
            snake.snakePos[i].domContent.style.left = snake.snakePos[i].x * snakeBody + "px"; 
            snake.snakePos[i].domContent.style.top = snake.snakePos[i].y * snakeBody + "px";
            if(snake.snakeBody[i].flag === 'head'){
                // 说明当前是蛇头
                snake.snakePos[i].domContent.style.background = `
                    url("../img/snakeHead.gif") center/contain no-repeat
                `;
                //根据方向进行旋转
                switch(snake.direction.flag){
                    case 'top' : {
                        snake.snakePos[i].domContent.style.transform = `rotate(-90deg)`;
                        break;
                    }
                    case 'bottom':{
                        snake.snakePos[i].domContent.style.transform = `rotate(90deg)`;
                        break;
                    }
                    case 'left':{
                        snake.snakePos[i].domContent.style.transform = `rotate(180deg)`;
                        break;
                    }
                    case 'right':{
                        snake.snakePos[i].domContent.style.transform = `rotate(0deg)`;
                        break;
                    }
                }   
            }else {
                //说明是蛇身
                snake.snakePos[i].domContent.style.background = "#9ddbb1";
                snake.snakePos[i].domContent.style.borderRadius = '50%';
            }
        }   
        //需要将创建的DOM元素添加到container容器上面
        document.querySelector(".container").append(snake.snakePos[i].domContent)
    }
}

//绘制食物
function drawFood(){
    //食物坐标随机
    //食物不能生成在蛇头或者身
    while(true){
        //死循环，直到生成符合要求的食物坐标才能退出
        var isRepeat = false;//默认生成的坐标是符合要求
        //随机生成一个坐标
        food.x = Math.floor(Math.random() * tr);
        food.y = Math.floor(Math.random() * tr);
        //查看坐标是否符合要求（遍历蛇）
        for(var i = 0;i < snake.snakePos.length;i++){
            if(snake.snakePos[i].x === food.x && snake.snakePos[i].y === food.y ){
                //进入if,说明当前生成的食物坐标和蛇的坐标冲突了
                isRepeat = true;
                break;
            }
        }
        if(!isRepeat){
            //跳出循环
            break;
        }
    }
    //整个while循环跳出之后，食物的坐标一定是OK的
    if(!food.domContent){
        food.domContent = document.createElement("div");
        food.domContent.style.width = snakeBody + "px";
        food.domContent.style.height = snakeBody + "px";
        food.domContent.style.position = "absolute";
        food.domContent.style.background = `
            url("../img/food.png") center/contain no-repeat
        `;
        document.querySelector('.container').append(food.domContent)
    }
    food.domContent.style.left = food.x * snakeBody + "px";
    food.domContent.style.top = food.y * snakeBody + "px";
}

// 初始化游戏方法
function initGame() {
    // 初始化地图
    for (var i = 0; i < tr; i++) {
        for (var j = 0; j < td; j++) {
            gridData.push({
                x: j,
                y: i
            });
        }
    }
    console.log(gridData);
    // 绘制蛇
    drawSnake(snake);
    // 绘制食物
}

//蛇的移动方法
function snakeMove(){
    var oldHead = snake.snakePos[snake.snakePos.length - 1];
    //根据方向计算出新的蛇头的坐标
    var newHead = {
        domContent : "",
        x : oldHead.x + snake.direction.x,
        y : oldHead.y + snake.direction.y,
        flag : 'head'
    }
    //将旧的头修改为身体
    oldHead.flag = 'body';
    oldHead.domContent.style.background = "#9ddbb1";
    oldHead.domContent.style.borderRadius = "50%";
    snake.snakePos.push(newHead);
    //重新绘制蛇
    drawSnake();
}

//绑定事件
function bindEvent(){
    //键盘事件，用户按下上下左右，蛇能够移动
    document.onkeydown = function(e){
        if(e.key === "ArrowUp" || e.key.toLocaleLowerCase() === "w"){
            //用户按的是上
        }
        if(e.key === "ArrowDown" || e.key.toLocaleLowerCase() === "s"){
            //用户按的是下
        }
        if(e.key === "ArrowLeft" || e.key.toLocaleLowerCase() === "a"){
            //用户按的是左
        }
        if(e.key === "ArrowRight" || e.key.toLocaleLowerCase() === "d"){
            //用户按的是右
        }
    }
}

// 游戏的主方法
function main() {
    // 初始化游戏
    initGame();

    //绑定事件
    bindEvent();
}